<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
    <link rel="stylesheet" href="./layui-v2.9.9/layui/css/layui.css">
    <script src="./layui-v2.9.9/layui/layui.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box .top {
            overflow: hidden;
        }

        .box .top .left {
            font-size: 0.768rem;
            font-weight: 800;
            float: left;
        }

        .box .top .left a {
            line-height: 2.13333333rem;
        }

        .box .top .left i {
            font-size: 0.768rem;
        }

        .box .top .left p {
            font-size: 0.68266667rem;
            font-weight: 100;
        }

        .box .top .rigth {
            float: right;
        }

        .box .top .rigth div {
            margin-top: 0.85333333rem;
            background-color: #b3b3b3;
            line-height: 0.85333333rem;
            border-radius: 0.42666667rem;
            margin-right: 0.42666667rem;
        }

        .box .top .rigth div span {
            display: inline-block;
            padding: 0 0.21333333rem;
            height: 0.85333333rem;
            border-radius: 0.42666667rem;
        }

        .box .top .rigth div span:nth-of-type(1) {
            background-color: #000000;
            color: white;
        }

        .box .top .layui-progress-big {
            margin-top: 0.42666667rem;
            width: 14.93333333rem;
            display: inline-block;
        }

        .box .top .layui-progress-big span {
            position: absolute;
            left: 5.54666667rem;
        }

        .box .top i {
            margin-top: -0.21333333rem;
            font-size: 0.768rem;
            line-height: 0.85333333rem;
        }

        .box .content {
            margin-top: 0.42666667rem;
        }

        .box .content>span:nth-of-type(1) {
            color: red;
            border: 0.04266667rem solid red;
            padding: 0.08533333rem 0.21333333rem;
        }

        .box .content>span:nth-of-type(2) {
            color: #a9a9a9;
            float: right;
        }

        .box .content .mySwiper {
            margin-top: 0.64rem;
        }

        .box .content .mySwiper .swiper-slide {
            text-align: center;
        }

        .box .content .mySwiper .swiper-slide img {
            width: 95%;
        }

        .box .content .layui-tab-card .layui-tab-title {
            white-space: wrap;
            float: left;
            width: 4.05333333rem;
            height: 6.82666667rem;
            padding-right: 0;
        }

        .box .content .layui-tab-card .layui-tab-title span {
            display: none;
        }

        .box .content .layui-tab-card .layui-tab-content {
            margin-left: 4.48rem;
        }

        .box .content .layui-tab-card .layui-tab-content .mySwiper {
            margin-top: 0;
        }

        .box .content .layui-tab-card .layui-tab-content ul li {
            position: relative;
            width: 100%;
            height: 3.41333333rem;
        }

        .box .content .layui-tab-card .layui-tab-content ul li img {
            width: 4.26666667rem;
            float: left;
        }

        .box .content .layui-tab-card .layui-tab-content ul li p {
            display: inline;
            position: absolute;
            bottom: 0.85333333rem;
            color: red;
        }

        .box .content .layui-tab-card .layui-tab-content ul li p span {
            font-size: 0.768rem;
            font-weight: 800;
        }

        .box .content .layui-tab-card .layui-tab-content ul li>span {
            position: absolute;
            bottom: 0;
            color: red;
            border: 0.04266667rem solid red;
        }

        .layui-layer-content p {
            margin: 0.42666667rem 0;
        }

        .layui-layer-content p a {
            color: red;
        }

        .layui-layer-content p:nth-of-type(1) a {
            float: right;
        }

        .advertisement {
            position: fixed;
            top: 45%;
            right: 0;
            z-index: 10;
        }

        .advertisement img {
            width: 3.41333333rem;
            float: left;
        }

        .swiper {
            width: 100%;
            height: 100%;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .swiper-slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="top">
            <div class="left">
                <a href="./地图路线.html">
                    <i class="layui-icon layui-icon-rate">
                    </i> 河南郑州荥阳吾悦广场店
                    <i class="layui-icon layui-icon-right"></i>
                </a>
                <p><i class="layui-icon layui-icon-location"></i>距离您4.3KM</p>
            </div>
            <!-- <div class="rigth">
                <div>
                    <span></span>
                    <span></span>
                </div>
            </div>-->
            <div class="layui-progress layui-progress-big">
                <div class="layui-progress-bar layui-bg-orange" lay-percent="35%">
                </div>
                <span>

                </span>
            </div>
            <!-- <i class="layui-icon layui-icon-clear"></i> -->
        </div>
        <div class="content">
            <span>
                商家公告
                客官:请适度点餐，光盘行动拒绝浪费，使用公勺公筷。
            </span>
            <span lay-on="details">点击查看<i class="layui-icon layui-icon-down"></i></span>
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="./微信图片_20250221185053.png" style="width: 300px;height: 400px;">
                    </div>
                    <div class="swiper-slide">
                        <img src="./微信图片_20250221194147.png" style="width: 300px;height: 400px;">
                    </div>
                    <div class="swiper-slide">
                        <img src="./微信图片_20250221194154.png" style="width: 300px;height: 400px;">
                    </div>
                    <div class="swiper-slide">
                        <img src="./t039f32a27bd009831d.jpg" style="width: 300px;height: 400px;">
                    </div>
                    <div class="swiper-slide">
                        <img src="http://safe-img.xhscdn.com/bw1/96fb0215-a340-4fb9-bb01-29f382a4a296?imageView2/2/w/1080/format/jpg"
                            style="width: 300px;height: 400px;">
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
            <div class="layui-tab layui-tab-card">
                <ul class="layui-tab-title">
                    <li class="layui-this">招牌烤鱼</li>
                    <li>专薯虾锅</li>
                    <li>特色烧烤</li>
                    <li>小吃炸贷</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <p>招牌烤鱼</p>
                        <div class="swiper mySwiper">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <img
                                        src="http://safe-img.xhscdn.com/bw1/96fb0215-a340-4fb9-bb01-29f382a4a296?imageView2/2/w/1080/format/jpg">
                                    &emsp;&emsp; 青花椒烤鱼￥79起/份
                                </div>
                                <div class="swiper-slide">
                                    <img src="https://p2.ssl.qhimgs1.com/t04f24791825bc2cd22.png">
                                    咖喱鸡烤鱼￥79起/份
                                </div>
                                <div class="swiper-slide">
                                    <img
                                        src="https://se-feed-bucket.cdn.bcebos.com/map_uigc_food_goout/6dade2284146f0ff475894a489da9c91.jpg">
                                    酱香烤鱼￥79起/份
                                </div>
                                <div class="swiper-slide">
                                    <img
                                        src="http://qcloud.dpfile.com/pc/_DdevnQM34yYlIk8p-W3Z_CGAI_G14wLs71hq4X4GWYRMWp6HA_n90jZhE8rfN6VACrizHvJXU3ffJSxI8F37He-gfUkJzWv0SApnzYRdl9N12iZiqmPt9SN0wFABBQ4TJ_C58xsOd8obB1rvRe60g.jpg">
                                    青花椒烤鱼￥79起/份
                                </div>
                            </div>
                            <div class="swiper-pagination"></div>
                        </div>
                        <ul>
                        </ul>
                    </div>
                    <!-- <div class="layui-tab-item">
                        <div class="swiper mySwiper">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <img src="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="">
                                </div>
                            </div>
                            <div class="swiper-pagination"></div>
                        </div>
                        <p></p>
                        <ul>
                        </ul>
                    </div> -->
                    <div class="layui-tab-item">
                        <img src="http://5b0988e595225.cdn.sohucs.com/images/20191016/9bae5bb0bcfe4a2b9d2d25cfce3cedb4.jpeg"
                            alt="" style='width: 400px;height: 400px;'>
                        &emsp;&emsp;&emsp;&emsp;
                        <img src="http://5b0988e595225.cdn.sohucs.com/images/20180327/0ac9516cda1249588e628cedc44d9f30.jpeg"
                            alt="" style="width: 400px;height: 400px;">
                        &emsp;&emsp;
                        <img src="./shaokao-36612349_3.jpg" alt="">
                    </div>
                    <div class="layui-tab-item">
                        <img src="http://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20190416/4fa67df32dcb4abd9aac8d305ec0be32.jpeg"
                            alt="" style='width: 500px;height: 400px;'>&emsp;&emsp;&emsp;&emsp;
                        <img src="./t01ddb78c7d2b0289a2.jpg" alt="">
                        &emsp;&emsp;
                        <img src="./90.jpg" alt="" style='width: 400px;height: 400px;'>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        (function () {
            // 创建一个style标签
            var styleNode = document.createElement("style");
            // 查询当前设备多宽并分为16份
            var num = document.documentElement.clientWidth / 16;
            // 在style里设置根元素大小
            styleNode.innerHTML = "html{font-size:" + num + "px!important}";
            // 把style标签添加到header标签最后
            document.head.appendChild(styleNode);
        })();

        var swiper = new Swiper(".mySwiper", {
            slidesPerView: 4,
            spaceBetween: 30,
            centeredSlides: true,
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
        });
    </script>
</body>

</html>